<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/table_jqgrid.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:02 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>用户表</title>
    
    
    <link href="${prc}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${prc}/css/indexCss/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="${prc}/css/indexCss/animate.min.css" rel="stylesheet">
    <link href="${prc}/css/indexCss/style.min862f.css?v=4.1.0" rel="stylesheet">
    <script src="${prc}/js/jquery.min.js"></script>
    <link href="${prc}/css/UserTableCss/ui.jqgridffe4.css?0820" rel="stylesheet">
    <link href="${prc}/css/UserTableCss/sweetalert.css" rel="stylesheet">
    <!-- easyui框架CSS -->
    <link href="${prc}/css/easyui.css" rel="stylesheet">
    <link href="${prc}/css/icon.css" rel="stylesheet">
    
    <style type="text/css">

        #alertmod_table_list_2 {
            top: 900px !important;
        }
    </style>
    <script type="text/javascript">
    	 $(function(){
 		   //为添加按钮绑定事件
 		     $("#addUser").click(function(){

 		    	   $("#ddd").dialog({
 		    			title : "添加用户", // 标题
 		    			cls : "easyui-dialog", // class
 		    			width : 450, // 宽度
 		    			height : 450, // 高度
 		    			maximizable : true, // 最大化
 		    			minimizable : false, // 最小化
 		    			collapsible : true, // 可伸缩
 		    			modal : true, // 模态窗口
 		    			resizable:true,
 		    			fitColumns:true,
 		    			onClose : function(){ // 关闭窗口
 		    				window.location =  "${prc}/UserTable.action";
 		    			},
 		    		}); 
 		    	   //将div中的iframe显示
 		    	   $("#frame").show().attr("src","${prc}/user/showAddUser.action"); 
 		     })
    	/*  }) */
 		     	     
		      //为修改按钮绑定事件
		     $("#updateUser").click(function(){
	              var id = jQuery("#table_list_2").jqGrid('getGridParam', 'selrow');
		    	  if(!id){
		    		  $.messager.alert('温馨提示','请选择需要修改的用户!','warning');
		    	  }else{
		    		  var ret = jQuery("#table_list_2").jqGrid('getRowData', id);
		    		  $("#ddd").dialog({
			    			title : "修改用户", // 标题
			    			cls : "easyui-dialog", // class
			    			width : 450, // 宽度
			    			height : 450, // 高度
			    			maximizable : true, // 最大化
			    			minimizable : false, // 最小化
			    			collapsible : true, // 可伸缩
			    			modal : true, // 模态窗口
			    	
			    			onClose : function(){ // 关闭窗口
			    			
			    				window.location =  "${prc}/UserTable.action";
			    			}
			    		});
			    	   //将div中的iframe显示
			    	   $("#frame").show().attr("src","${prc}/user/showUpdateUser.action?user.userName="+ret.name);
		    	  }
		     })
		     $("#delUser").click(function(){
			  var id = jQuery("#table_list_2").jqGrid('getGridParam', 'selrow');
	    	  if(!id){
	    		  $.messager.alert('温馨提示','请选择需要删除的用户!','warning');
	    	  }else{
					swal(
							{
								title:"您确定要删除这条信息吗",
								text:"删除后将无法恢复，请谨慎操作！",
								type:"warning",showCancelButton:true,
								confirmButtonColor:"#DD6B55",
								confirmButtonText:"删除",
								closeOnConfirm:false
							},
			function(){
			 var ret = jQuery("#table_list_2").jqGrid('getRowData', id);
				$.ajax({
						url:"${prc}/user/deleteUser.action?user.userName="+ret.name,
						dataType:"text",
						success:function(msg){
							swal("删除成功","您已经永久删除了这条信息。","success");
							}
						})
						   window.location = "${prc}/UserTable.action";
						})
	    	  	}
    		})
    	})
    </script>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                   <div class="ibox-title">
                        <h5>用户表</h5>
                    </div>
                    <div class="ibox-content">
                     	<a id="addUser"  class="btn btn-white btn-bitbucket" >
                          <i class="fa fa-user-plus">&nbsp;&nbsp;添加用户</i>
                        </a>
                    	<a id="updateUser" class="btn btn-white btn-bitbucket">
                            <i class="fa fa fa-edit">&nbsp;&nbsp;修改用户</i>
                        </a>
                        <a id="delUser" class="btn btn-white btn-bitbucket">
                            <i class="fa fa fa-edit">&nbsp;&nbsp;删除用户</i>
                        </a>
                        <div class="jqGrid_wrapper">
                            <table id="table_list_2"></table>
                            <div id="pager_list_2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="ddd">
	     <iframe id="frame"  style="display:none;width:100%;height:100%;" frameborder=0></iframe>
	</div> 
	<script src="${prc}/js/jquery.min.js"></script>
    <script src="${prc}/js/bootstrap.min.js"></script>
    <script src="${prc}/js/UserTableJs/jquery.peity.min.js"></script>
    <script src="${prc}/js/UserTableJs/grid.locale-cnffe4.js?0820"></script>
    <script src="${prc}/js/UserTableJs/jquery.jqGrid.minffe4.js?0820"></script>
    <script src="${prc}/js/UserTableJs/content.min.js?v=1.0.0"></script>
    <script src="${prc}/js/UserTableJs/sweetalert.min.js"></script>
    <!-- easyui框架JS -->
    <script src="${prc}/js/jquery.easyui.min.js"></script>
    <script src="${prc}/js/easyui-lang-zh_CN.js"></script>
   	<script type="text/javascript">
	    $(document).ready(function(){
				$.jgrid.defaults.styleUI="Bootstrap";
				var mydata;
				$.ajax({ 
					url : '${prc}/user/selectUser.action', 
					//data:{name:value}, 
					cache : false, 
					async : false, 
					type : "POST", 
					dataType : 'json', 
					success : function (result){ 
							mydata = result;
						} 
					}); 
		
		$("#table_list_2").jqGrid({data:mydata,datatype:"local",height:450,autowidth:true,shrinkToFit:true,rowNum:20,rowList:[10,20,30],
		colNames:["ID","用户名","性别","语言","种族","邮箱","电话"],
		colModel:[{
					name:"id",index:"id",editable:true,width:200
				},
				{
					name:"name",index:"name",editable:true,width:200
				},
				{
					name:"sex",index:"sex",editable:true,width:250
				},
				{
					name:"language",index:"language",editable:true,width:250
				},
				{
					name:"race",index:"race",editable:true,width:250
				},
				{
					name:"mailbox",index:"mailbox",editable:true,width:250
				},
				{
					name:"phoneNumBer",index:"phoneNumBer",editable:true,width:250
				}
				],
				pager:"#pager_list_2",
				viewrecords:true,
				caption:"",
				add:true,
				edit:true,
				addtext:"Add",
				edittext:"Edit",
				hidegrid:false
				});
		$("#table_list_2").setSelection(4,true);
		$("#table_list_2").jqGrid("navGrid","#pager_list_2",{
					edit:false,add:false,del:false,search:true
				},{
					height:200,reloadAfterSubmit:true
				}
			);
		$(window).bind("resize",function(){
					var width=$(".jqGrid_wrapper").width();
					$("#table_list_1").setGridWidth(width);
					$("#table_list_2").setGridWidth(width)
				})
			}
		);
    	
 </script>
</body>
</html>